<template>
	<view>
		<view v-for="(item,index) in linkageList" :key="index"
			class="bg-white padding-sm margin-bottom common-box" @tap="gotoLinkage(item)">
			<view class="flex justify-between">
				<view class="text-df">{{item.name}}</view>
				<view class="flex">
					<view class='cu-tag' :class="'bg-' + themeConfig.theme">
						{{1 === item.status ? $t('open') : $t('close')}}
					</view>
					<button class="cu-btn block sm margin-left-sm" :class="'line-' + themeConfig.theme"
						@tap.stop="gotoHistory(item)">
						<text class="cuIcon-form"></text>
					</button>
					<button class="cu-btn block line-red sm margin-left-sm" @tap.stop="showDeleteLinkage(item)">
						<text class="cuIcon-deletefill"></text>
					</button>
					<button class="cu-btn block sm margin-left-sm" :class="'line-' + themeConfig.theme"
						@tap.stop="edit(item)">
						<text class="cuIcon-edit"></text>
					</button>
				</view>
			</view>
			<view style="margin-top: 30px;height: 20px;">
				<view style="float: right;" v-if="item.startDate!==0 || item.endDate!==0" class="text-xs">
					{{formatDateTime(item.startDate)}} ~ {{formatDateTime(item.endDate)}}
				</view>
			</view>
		</view>


		<view @tap="gotoHistory()" class="cu-avatar round lg light bg-white"
			:style="[{backgroundColor:themeConfig.primaryColor}]"
			style="position:fixed !important;z-index: 1024;right:20rpx;bottom: 380rpx">
			<view class="text-lg">
				<text class="cuIcon-form text-white"></text>
			</view>
		</view>

		<view @tap="deleteByDeviceDialog = true" class="cu-avatar round lg light bg-white"
			:style="[{backgroundColor:themeConfig.primaryColor}]"
			style="position:fixed !important;z-index: 1024;right:20rpx;bottom: 260rpx">
			<view class="text-lg">
				<text class="cuIcon-deletefill text-white"></text>
			</view>
		</view>

		<view @tap="showAdd" class="cu-avatar round lg light bg-white"
			:style="[{backgroundColor:themeConfig.primaryColor}]"
			style="position:fixed !important;z-index: 1024;right:20rpx;bottom: 140rpx">
			<view class="text-lg">
				<text class="cuIcon-add text-white"></text>
			</view>
		</view>

		<view class="cu-modal" :class="deleteByDeviceDialog?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{$t('delete')}}{{$t('all')}}</view>
					<view class="action" @tap="deleteByDeviceDialog = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green"
							@tap="deleteByDeviceDialog = false">{{$t('cancel')}}</button>
						<button class="cu-btn bg-green margin-left" @tap="deleteAllLinkage()">{{$t('confirm')}}</button>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="deleteLinkageDialog?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{$t('delete')}}{{linkage.name}}</view>
					<view class="action" @tap="deleteLinkageDialog = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green"
							@tap="deleteLinkageDialog = false">{{$t('cancel')}}</button>
						<button class="cu-btn bg-green margin-left" @tap="deleteLinkage()">{{$t('confirm')}}</button>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-modal bottom-modal" :class="editDialog?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-gray" @tap="editDialog = false">{{$t('cancel')}}</view>
					<view class="action" :style="{color : themeConfig.primaryColor}" @tap="editSave">{{$t('confirm')}}
					</view>
				</view>
				<view>
					<form>
						<view class="cu-form-group">
							<view class="title">{{$t('name')}}</view>
							<input v-model="linkage.name" />
						</view>
						<radio-group class="block" @change="typeChange">
							<view class="cu-form-group">
								<view class="title">{{$t('type')}}</view>
								<view>
									<radio class='radio' :disabled="linkage.linkageId"
										:class="[themeConfig.theme,linkage.type === 'server'?'checked':'']"
										:checked="linkage.type === 'server'" value="server">
									</radio><text class="margin-left-xs">{{$t('server')}}</text>
									<radio class='radio margin-left-sm'
										:disabled="!device.canDeviceLinkage || linkage.linkageId"
										:class="[themeConfig.theme,!linkage.type === 'device'?'checked':'']"
										:checked="linkage.type === 'device'" value="device">
									</radio><text class="margin-left-xs">{{$t('device')}}</text>
								</view>
							</view>
						</radio-group>
						<view class="cu-form-group">
							<view class="title">{{$t('status')}}</view>
							<switch class='radius' @change="statusChange"
								:class="[themeConfig.theme,linkage.status === 1?'checked':'']"
								:checked="linkage.status === 1">
							</switch>
						</view>
						<view class="cu-form-group">
							<view class="title">{{$t('startDate')}}</view>
							<view>
								<picker mode="date" @change='startDateChange' :value="formatDate(linkage.startDate)">
									<view v-if="linkage.startDate">{{formatDateTime(linkage.startDate)}}
									</view>
									<view v-else class="cuIcon-countdown">
										<text class="margin-left-sm">{{$t('not') + $t('data')}}</text>
									</view>
								</picker>
							</view>
						</view>
						<view class="cu-form-group">
							<view class="title">{{$t('endDate')}}</view>
							<view>
								<picker mode="date" @change='endDateChange' :value="formatDate(linkage.endDate)">
									<view v-if="linkage.endDate">{{formatDateTime(linkage.endDate)}}
									</view>
									<view v-else class="cuIcon-countdown">
										<text class="margin-left-sm">{{$t('not') + $t('data')}}</text>
									</view>
								</picker>
							</view>
						</view>
					</form>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		showToast
	} from '@/util/toast.js'
	import {formatDateTime,format,formatNumber} from '@/util/formatTime.js'
	import * as deviceLinkageApi from '@/api/iot/iotDeviceLinkageApi.js'
	import *
	as iotDeviceApi from '@/api/iot/iotDeviceApi.js'
	import * as storage from '@/util/storage.js'
	export default {
		name: 'DeviceLinkage',
		data() {
			return {
				linkageList: [],
				linkage: {},
				deleteByDeviceDialog: false,
				deleteLinkageDialog: false,
				device: {},
				editDialog: false
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		props: {
			deviceName: {
				type: String,
				default: ''
			},
			deviceCore: {
				type: String,
				default: ''
			},
			name: {
				type: String,
				default: ''
			},
			command: {
				type: [Number, String],
			},
			value: {
				type: [Number, String],
			},
			keyName: {
				type: [Number, String],
			},
			port: {
				type: [Number, String],
			},
		},
		created() {
			storage.setDeviceNavigationComponent('deviceLinkage')
			this.init()
		},
		methods: {
			init() {
				this.getDeviceDetails()
			},
			statusChange(e) {
				this.linkage.status = e.detail.value ? 1 : 0
			},
			typeChange(e) {
				this.linkage.type = e.detail.value
			},
			startDateChange(e) {
				const date = e.detail.value.replace(/-/g, '/')
				const timestamp = (new Date(date).getTime() / 1000).toString();
				this.linkage.startDate = timestamp
			},
			endDateChange(e) {
				const date = e.detail.value.replace(/-/g, '/')
				const timestamp = (new Date(date).getTime() / 1000).toString();
				this.linkage.endDate = timestamp
			},
			showAdd() {
				this.linkage = {
					type: 'server',
					deviceCore: this.deviceCore,
					name: '',
					startDate: 0,
					endDate: 0,
					status: 1
				}
				this.editDialog = true
			},
			edit(item) {
				this.linkage = item
				this.editDialog = true
			},
			editSave() {
				let res
				if (this.linkage.linkageId) {
					if (this.linkage.type === 'device') {
						res = deviceLinkageApi.updateLinkageToDevice(this.linkage)
					} else if (this.linkage.type === 'server') {
						res = deviceLinkageApi.updateLinkageToServer(this.linkage)
					} else {
						showToast(this.$t('failure'), 'none', 1000, false) //操作失败
					}
				} else {
					if (this.linkage.type === 'device') {
						res = deviceLinkageApi.insertLinkageToDevice(this.linkage)
					} else if (this.linkage.type === 'server') {
						res = deviceLinkageApi.insertLinkageToServer(this.linkage)
					} else {
						showToast(this.$t('failure'), 'none', 1000, false) //操作失败
					}
				}

				res.then(res => {
					const {
						data
					} = res
					if (data) {
						this.listLinkage()
						this.editDialog = false
					}
				})

			},
			showDeleteLinkage(item) {
				this.linkage = item
				this.deleteLinkageDialog = true
			},
			deleteLinkage() {
				if (this.linkage.type === 'device') {
					deviceLinkageApi.deleteLinkageToDevice({
						linkageId: this.linkage.linkageId
					}).then(res => {
						const {
							data
						} = res
						if (data) {
							this.deleteLinkageDialog = false
						}
						this.listLinkage()
					})
				} else if (this.linkage.type === 'server') {
					deviceLinkageApi.deleteLinkageToServer({
						linkageId: this.linkage.linkageId
					}).then(res => {
						const {
							data
						} = res
						if (data) {
							this.deleteLinkageDialog = false
						}
						this.listLinkage()
					})
				} else {
					showToast(this.$t('failure'), 'none', 1000, false) //操作失败
				}
			},
			getDeviceDetails() {
				iotDeviceApi.getDeviceDetails({
					deviceCore: this.deviceCore
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						this.device = data
						this.listLinkage()
					}
				})
			},
			formatDateTime(date) {
				if (date === 0) {
					return ''
				}
				return formatDateTime(date)
			},
			formatDate(date) {
				if (date === 0) {
					return ''
				}
				const {
					year,
					month,
					day
				} = format(date * 1000)
				return [year, month, day].map(formatNumber).join('-')
			},
			gotoHistory(item) {
				let path =
					`/pages/deviceLinkageExecute/deviceLinkageExecute?deviceCore=${this.deviceCore}&deviceName=${this.deviceName}`
				if (item && item.linkageId) {
					this.linkage = item
					path = path + `&linkageId=${item.linkageId}&linkageName=${item.name}`
				}
				uni.navigateTo({
					url: path
				})
			},
			gotoLinkage(item) {
				uni.navigateTo({
					url: `/pages/deviceLinkageInfo/deviceLinkageInfo?linkageId=${item.linkageId}&linkageName=${item.name}&deviceName=${this.deviceName}`
				})
			},
			deleteAllLinkage() {
				deviceLinkageApi.deleteLinkageByDeviceToServer({
					deviceCore: this.deviceCore
				}).then(() => {
					if (this.device.canDeviceLinkage) {
						deviceLinkageApi.deleteLinkageByDeviceToDevice({
							deviceCore: this.deviceCore
						}).then((res) => {
							const {
								data
							} = res
							if (data) {
								this.deleteByDeviceDialog = false
								this.listLinkage()
							}
						})
					} else {
						this.deleteByDeviceDialog = false
						this.listLinkage()
					}

				})
			},
			listLinkage() {
				deviceLinkageApi.listLinkage({
					deviceCore: this.deviceCore
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						const linkageList = []
						data.forEach(linkage => {
							linkageList.push(linkage)
						})
						if (linkageList.length > 0) {
							this.linkage = linkageList[0]
						}
						this.linkageList = linkageList
					} else {
						this.linkageList = []
					}
				})
			},
		}
	}
</script>
